plotly.js

plotly.js charts are described declaratively as JSON objects. Every aspect of a plotly chart (the colors, the grids, the data, and so on) has a corresponding JSON attribute. This page contains an extensive list of these attributes.

Plotly's graph description places attributes into two categories: traces (objects that describe a single series of data in a graph) and layout (attributes that apply to the rest of the chart, like the title, xaxis, or annotations). Traces are categorized by chart type (e.g. scatter, heatmap).

Here is a simple example of a plotly chart inlined with links to each attribute's reference section.

data = [
    {
        type: 'scatter',  // all "scatter" attributes: https://plot.ly/javascript/reference/#scatter
        x: [1, 2, 3],     // more about "x": #scatter-x
        y: [3, 1, 6],     // #scatter-y
        marker: {         // marker is an object, valid marker keys: #scatter-marker
            color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
        }
    },
    {
        type: 'bar',      // all "bar" chart attributes: #bar
        x: [1, 2, 3],     // more about "x": #bar-x
        y: [3, 1, 6],     // #bar-y
        name: 'bar chart example' // #bar-name
    }
];

layout = {                     // all "layout" attributes: #layout
    title: 'simple example',  // more about "layout.title": #layout-title
    xaxis: {                  // all "layout.xaxis" attributes: #layout-xaxis
        title: 'time'         // more about "layout.xaxis.title": #layout-xaxis-title
    },
    annotations: [            // all "annotation" attributes: #layout-annotations
        {
            text: 'simple annotation',    // #layout-annotations-text
            x: 0,                         // #layout-annotations-x
            xref: 'paper',                // #layout-annotations-xref
            y: 0,                         // #layout-annotations-y
            yref: 'paper'                 // #layout-annotations-yref
        }
    ]
}